import Image from 'next/image'
import { useRouter } from 'next/navigation'

export default function Logo() {
  const router = useRouter()
  return (
    <div
      className="flex items-center space-x-2 cursor-pointer
             transition-transform duration-300 ease-out
             hover:-translate-y-[3px]">
      <div className="relative w-8 h-8 cursor-pointer" onClick={() => router.push('/')}>
        <Image src="/logo.svg" alt="inGauge logo" fill className="rounded-lg object-cover" />
      </div>
      <span className="text-[16px] text-white font-semibold cursor-pointer" onClick={() => router.push('/')}>
        inGauge
      </span>
      <span
        className="text-[8px] ml-1 px-2 py-[2px] 
               bg-gradient-to-b from-yellow-400 to-yellow-600
               text-black rounded-md
               shadow-[0_0_8px_rgba(255,215,0,0.4)]">
        EARLY
        <br />
        ACCESS
      </span>
    </div>
  )
}
